<template>
	<view class="container">
		<div class="select-area">
			<u-subsection mode="subsection" :list="diseaseList" :current="current"
				@change="selectDisease"></u-subsection>
		</div>

		<div class="disease-introduce card-style">
			<image :src="nowCase.exampleUrl" alt="" class="disease-example"></image>
			<div class="disease-info">
				<u-text :text="nowCase.name" :bold="true" size="26"></u-text>
				<u-text type="info" :text="'常见疾病：' + nowCase.subDisease"></u-text>
			</div>
		</div>

		<div class="content-box card-style">
			<div class="small-title">概述</div>
			<p class="disease-content">{{nowCase.overview}}</p>
			<u-divider text="分割线" :dot="true"></u-divider>
			<div class="small-title">症状</div>
			<p class="disease-content">{{nowCase.symptoms}}</p>
			<u-divider text="分割线" :dot="true"></u-divider>
			<div class="small-title">诊断</div>
			<p class="disease-content">{{nowCase.diagnostic}}</p>
			<u-divider text="分割线" :dot="true"></u-divider>
			<div class="small-title">治疗</div>
			<p class="disease-content">{{nowCase.heal}}</p>
			<u-divider text="分割线" :dot="true"></u-divider>
			<div class="small-title">近期病例</div>
			<div v-if="hasSimilarCase === true">
				<u--text type="primary" :text="item.title" v-for="(item,index) in nowCase.similarCaseList" :key="index"
					@click="viewCaseDetailInfo(item)"></u--text>
			</div>
			<div v-else>
				<u-empty mode="data">
				</u-empty>
			</div>
			<u-divider text="分割线" :dot="true"></u-divider>
			<div class="small-title">相关疾病</div>
			<u--text type="info" :text="item" v-for="(item,index) in nowCase.similarList" :key="index"
				style="margin-top: 5px;"></u--text>
		</div>

		<u-popup :show="showSimilarInfo" mode="center" :closeable="true">
			<div class="case-detail">
				<u--form labelPosition="left" labelWidth="auto" class="info-form">
					<u-form-item label="患者年龄:">
						<u-tag :text="nowSimilarInfo.age" plain size="mini" type="success"></u-tag>
					</u-form-item>
					<u-form-item label="患者性别:">
						<u-tag :text="nowSimilarInfo.gender === 'Male' ? '男' : '女'" plain size="mini"
							type="warning"></u-tag>
					</u-form-item>
					<u-form-item label="眼底图像:">
						<u-album :urls="[nowSimilarInfo.leftFundus,nowSimilarInfo.rightFundus]"
							keyName="src2"></u-album>
					</u-form-item>
					<u-form-item label="患者自述">
						<u--textarea v-model="nowSimilarInfo.description" placeholder="患者暂无自述" disabled></u--textarea>
					</u-form-item>
				</u--form>
				<div class="close-btn">
					<u-button type="success" text="关闭" size="small" @click="showSimilarInfo = false;"></u-button>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		getTopKInfo
	} from '../../../api/dignosis';
	export default {
		data() {
			return {
				diseaseList: ['糖尿病', '青光眼', '白内障', 'AMD', '高血压', '近视'],
				current: 0,
				// 当前展示的疾病是否含有近期病例
				hasSimilarCase: false,
				// 当前展示的相似病人信息
				showSimilarInfo: false,
				nowSimilarInfo: {},
				// 当前展示的疾病和全部的科普的疾病
				nowCase: {},
				allCase: [{
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/D_example.jpg',
					name: '糖尿病',
					subDisease: '糖尿病视网膜病变',
					overview: '糖尿病眼底病变，简称“糖网”，是糖尿病最常见和严重的微血管并发症之一，是慢性进行性糖尿病导致的视网膜微血管渗漏和阻塞从而引起一系列的眼底病变，如微血管瘤、硬性渗出、棉絮斑、新生血管、玻璃体增殖、黄斑水肿甚至视网膜脱离，糖网是导致糖尿病患者视力下降的主要原因，也是成人后天性失明的主要原因。',
					symptoms: '说到糖网的症状和表现，临床上分为两种类型：非增殖性和增殖性两种。早期糖网为非增殖性，病变一般由视网膜中周部开始，此时对视力没有明显影响，患者通常不会有任何察觉，一般都是在体检时发现。当病情一发展到增殖期时，视网膜发生缺血缺氧性改变刺激新生血管的生长，当新生血管长入玻璃体时，就会引起玻璃体积血。如果出血量少时患者感觉眼前有漂浮物，如果出血量大，患者视力将急剧下降，一旦出现牵拉性视网膜脱离视力将明显下降甚至完全失明。',
					diagnostic: '糖尿病一经确诊就应该立即到眼科门诊就诊，首先需要进行视力、散瞳眼底等初步检查。根据眼底的改变，再做眼部B超、光学相干断层扫描（OCT）、光学相干断层扫描血管成像（OCTA）、眼底荧光血管造影、视网膜电生理等检查。医生综合上述检查结果确定糖网的分期、下一步治疗方案及患者复查频次等。',
					heal: '糖网作为糖尿病的并发症，是随着糖尿病病程及血糖控制情况而发展的，目前是无法根治的。患者要按医嘱严格控制血糖，控制体重，治疗高血压、高血脂等基础病。眼科医生根据患者病情情况行视网膜激光光凝术、玻璃体切割术、玻璃体腔注射抗VEGF药物以及全身使用改善微循环药物辅助治疗。',
					similarList: ['视网膜病变', '白内障', '波动性屈光不正', '开角型青光眼', '眼球运动神经麻痹', '缺血性视突病变', '虹膜睫状炎'],
				}, {
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/G_example.jpg',
					name: '青光眼',
					subDisease: '恶性青光眼',
					overview: '青光眼是一种发病迅速、危害性大、随时导致失明的常见疑难眼病。特征就是眼内压间断或持续性升高的水平超过眼球所能耐受的程度而给眼球各部分组织和视功能带来损害，导致视神经萎缩、视野缩小、视力减退，失明只是时间的迟早而已，在急性发作期24-48小时即可完全失明。青光眼属双眼性病变，可双眼同时发病，或一眼起病，继发双眼失明。',
					symptoms: '青光眼的病因病机非常复杂，因此它的临床表现也是多种多样。急性闭角型青光眼：发病急骤，表现为患眼侧头部剧痛，眼球充血，视力骤降的典型症状。亚急性闭角型青光眼(包括亚临床期、前驱期和间歇期)：患者仅轻度不适，甚至无任何症状，可有视力下降，眼球充血轻，常在傍晚发病，经睡眠后缓解。慢性闭角型青光眼：自觉症状不明显，发作时轻度眼胀，头痛，阅读困难，常有虹视。发作时患者到亮处或睡眠后可缓解，一切症状消失。',
					diagnostic: '青光眼病人的治疗有赖于准确的诊断。青光眼病人的诊断与其他疾病一样，根据病史、临床表现及检查结果进行综合分析。对可疑患者，首先应测量眼压。眼压大于3.20kPa（24mmHg）为病理性高眼压，但一次眼压偏高不能诊断青光眼，而一次眼压正常也不能排除青光眼。因为眼压在一日内呈周期性波动。日眼压波动大于1.07kPa（8mmHg）为病理性眼压。正常人双眼眼压接近，如双眼压差大于0.67kPa（5mmHg）也为病理性眼压。其次应检查眼底，观察视盘改变，青光眼的视盘改变具有一定的特殊性，有重要的临床价值。常表现为病理性陷凹，目前普遍采用陷凹与视盘直径的比值（C/D）表示陷凹大小。C/D大于0.6或双眼C/D差大于0.2为异常；视盘沿变薄，常伴有视盘沿的宽窄不均和切迹，表示视盘沿视神经纤维数量减少；视盘血管改变，表现为视盘边缘出血，血管架空，视盘血管鼻侧移位和视网膜中央动脉搏动。此外，眼底检查可观察视网膜神经纤维层缺损，由于它可出现在视野缺损前，被认为是青光眼早期诊断指征之一。',
					heal: '治疗青光眼的方法包括药物治疗、激光治疗和手术治疗。滴眼液是公认的青光眼治疗方式，用于降低眼压，但如果药物不能很好地控制眼压，医生可能会考虑进行激光治疗或者手术。近年来，干细胞治疗也在青光眼的治疗中起到了一定的作用。尽管目前无法治愈青光眼，通过早期发现和积极治疗，可使大部分患者保有一定的视力。',
					similarList: ['原发性开角型青光眼', '原发性闭角型青光眼', '急性闭角型青光眼', '慢性闭角型青光眼', '儿童（发育）性青光眼', '急性闭角型青光眼',
						'亚急性闭角型青光眼'
					]
				}, {
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/C_example.jpg',
					name: '白内障',
					subDisease: '白内障',
					overview: '白内障是一种眼球中晶状体部位由于各种原因发生混浊导致视觉障碍的疾病。其常见类型包括老年性白内障、并发性白内障、外伤性白内障、代谢性白内障等，老年性白内障尤为常见。原因多种多样，如老化、遗传、局部营养障碍、免疫与代谢异常等。此外，暴露在强光下、吸烟酗酒、营养不良、长期使用糖皮质激素等都会增加白内障的风险。白内障是全球第一位致盲性眼病，特别是在老年人中较为常见。',
					symptoms: '白内障的早期症状一般不明显，仅为轻度的视物模糊，患者可能误以为是老花眼或眼疲劳所致，极易漏诊。中期以后患者的晶状体混浊逐渐加重，视物模糊的程度也随之加重，并可能出现复斜视、近视、眩光等异常感觉。随病情发展，患者最终可完全失明。视物混浊、模糊，总是感到眼前朦胧感、雾蒙蒙感，这是最重要也最明显的症状。',
					diagnostic: '医生在使用检眼镜（一个能照射到眼睛后部且带放大镜的手持灯）检查眼睛时通常可以检测到白内障。 医生通过使用裂隙灯（一种让医生能在高倍放大下检查眼睛的仪器）可以识别白内障的确切位置，以及阻碍光线的程度。 医生通过检眼镜就可以发现白内障，而通过裂隙灯检查，则可以更细致地了解晶状体混浊的位置及程度，同时还能观察其他眼部结构。 在白内障严重损害视力之前，框架眼镜和隐形眼镜可提高患者的视力。',
					heal: '白内障的主要治疗方法是手术，包括切除混浊的晶状体并植入人工晶体。目前白内障手术已经成熟，疗效良好。药物治疗仅适用于症状轻微、尚未达到手术标准的患者。在恢复期，患者需注意保持眼部清洁，预防感染，并按照医生的指导进行复查。术后视力的提高程度取决于眼底和角膜的状况。',
					similarList: ['糖尿病', '高度近视', '青光眼', '葡萄膜炎', '眼部外伤', '放射性损伤', '甲状腺功能异常']
				}, {
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/A_example.jpg',
					name: 'AMD',
					subDisease: '年龄相关性黄斑变性',
					overview: '年龄相关性黄斑变性（AMD）是一种发病率与年龄增长明显相关的黄斑区视网膜变性类疾病。AMD的确切发病机制不详，目前认为，光损伤、遗传背景、女性、白种人、吸烟等因素为发病的危险因素。',
					symptoms: '干性 AMD,对于干性年龄相关性黄斑变性患者，中心视力下降缓慢且无痛。患者几乎没有或者没有症状，但当有症状时，通常双眼均会出现。物体可能看起来像被水洗掉色了一样，看不清细节，阅读可能变得更加困难。随着病情的发展，通常会形成中心盲点（暗点），并且有时可严重损害视力。大部分患者保留足够视力，可阅读和开车。湿性 AMD,而对于湿性黄斑变性患者，常表现为视力突然（往往在几天或几周内）下降并迅速进展。若异常血管出血，则发作会更加突然。首发症状可能是部分中心视力模糊、呈波状或扭曲。视野外边缘的视力（周边视力）通常不受影响。湿性年龄相关性黄斑变性通常一次只发生在一只眼睛。在阅读或看电视时通常有困难。',
					diagnostic: '医生检查眼睛,可能进行彩色摄影、荧光血管造影和/或光学相干断层扫描,医生通常通过检眼镜（将一束光通过放大镜照射到眼睛后部）来检查眼睛，即可诊断年龄相关性黄斑变性 (AMD)。即使在症状出现前，视网膜损伤几乎始终可见。为了确诊湿性 AMD，医生可能对视网膜进行彩色摄影或进行荧光血管造影。光学相干断层扫描是一种影像学检查，常用于帮助确诊湿性 AMD 和评估患者的治疗疗效。',
					heal: '干性黄斑变性目前尚没有特殊有效的治疗方法。轻度病变目前不建议治疗。戒烟可能有助于降低发生年龄相关性黄斑变性 (AMD) 的风险。单眼中期或晚期龄相关性黄斑变性患者建议使用膳食补充剂。人们可通过以下补充剂来降低发生晚期 AMD 的风险：锌，铜，维生素C，维生素E，叶黄素加玉米黄质（对于过去或目前吸烟的人），β-胡萝卜素或维生素 A（对于目前和过去不吸烟的人），但是，β 胡萝卜素或维生素 A 可能增加肺癌的发病风险，因而在过去 7 年内有过吸烟史的人不得摄入这两种成分。叶黄素加玉米黄质可以代替使用。摄取这些膳食补充剂的男性出现尿道和前列腺问题的风险更高，而摄取这些膳食补充剂的女性出现压力性尿失禁的风险更高。β-胡萝卜素可能导致皮肤变黄。',
					similarList: ['玻璃膜疣', '地图样萎缩', '脉络膜新生血管', '视网膜色素上皮脱离', '视网膜下出血', '视网膜水肿', '网状玻璃膜疣']
				}, {
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/H_example.jpg',
					name: '高血压',
					subDisease: '高血压眼底病变',
					overview: '高血压是一种常见的心血管系统疾病，我国群体发病率为5.11%，病人中约70%有眼底改变。眼底阳性率与性别无关，但与病人年龄有比较密切的联系，年龄愈大阳性率愈高。临床常见的呈慢性经过的高血压病患者中 ，眼底阳性率与病程长短呈正比，病程时间较长者，眼底阳性率亦较高。血压增高程度与眼底阳性率基本平行，舒张压增高对眼底病变的作用更为显著。眼的屈光状态对高血压病眼底阳性率有一定影响，远视眼高于正视眼，近视眼则低于正视眼。',
					symptoms: '原发性高血压性视网膜病变是由于高血压引起的，以视网膜动脉收缩乃至视网膜、视乳头病变为主要表现，在视乳头周围约4~6乳头直径的部位上，以视网膜灰色水肿，小动脉中心反射增强，动静脉交叉征，鲜红色火焰状出血，棉絮状白斑，黄白色发亮的硬性渗出及黄斑星状图谱为主要特征。多发于40岁以后。眼底病变的程度与高血压时间长短及其严重程度密切相关，随着血压下降和控制，眼底出血，渗出等病变也逐渐好转，一般效果很好，但到晚期效果较差。高血压分为缓进型和急进型两类。临床所见的绝大多数为缓进型，病程进展缓慢；急进型多发生于青壮年，病初即迅速发展或经数年的缓慢过程而后突然发展。',
					diagnostic: '医生检查眼睛,医生通过检眼镜检查可发现高血压患者视网膜的特征性改变。视网膜血管损伤的严重程度与身体其他器官血管受高血压损伤的严重程度存在一定的相关性，如颅内、心脏及肾脏等。当血压非常高时，医生可能观察到视神经盘肿胀（称为视神经乳头水肿），提示需要立即治疗（参见表成年人中的血压分级）。',
					heal: '高血压性视网膜病变治疗的目标是长期降低血压。但血压显著升高并威胁生命时，应立即进行治疗以挽救视力并防止其他并发症的发生，包括脑卒中、心力衰竭、肾衰竭及心脏病发作等。',
					similarList: ['高血压性视网膜病变', '视网膜动脉阻塞', '视网膜静脉阻塞', '糖尿病性视网膜病变', '高血压脉络膜病变', '高血压视神经病变', '黄斑水肿']
				}, {
					exampleUrl: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/M_example.jpg',
					name: '近视',
					subDisease: '高度近视',
					overview: '近视是指平行光线经眼球屈光系统后聚焦在视网膜之前导致的 视物模糊，是屈光不正的一种，其形成的原因目前尚未明确，但常与遗传因素、不良的用眼习惯等原因有关。 近视表现为平行光进入眼睛后不能在视网膜上成像，发生看远不清，眼部结构则表现为眼轴长度超出正常范围或角膜、晶状体曲率过大。 近视的高危人群主要包括青少年、长期从事近距离用眼工作者等。',
					symptoms: '看远模糊，看近比较清晰，是近视眼最经典的症状，患者看远处目标时会不自觉眯起眼睛，眼睛经常出现疲劳的现象，用眼过度后会出现重影、畏光以及眼干等。近视度数较高者，还可出现外隐斜、外斜视等。',
					diagnostic: '根据近视度数可将近视分为低度近视、中度近视和高度近视，根据其屈光成分可分为轴性近视和屈光性近视；而根据其病程进展又可分为单纯性近视和病理性近视。患近视眼后，可以通过佩戴框架眼镜、角膜接触镜或者屈光手术矫正视力。框架眼镜通常适合各个年龄段的近视患者，成年近视患者，也可以通过手术进行治疗。大家比较熟悉的角膜塑形镜，除了可以提高裸眼视力，它在矫正近视的基础上，还具备延缓近视度数增长的作用；',
					heal: '近视可以通过养成良好的用眼习惯、适当进行户外活动等方式来预防。其中户外的光照活动时间是最为重要的，建议每天保证2个小时的户外时间，同时，尽可能的减少持续的近距离用眼，保证充分的营养。此外，定期进行眼部检查对预防近视也至关重要，通常建议至少每年或者每半年进行一次视力检查，以便及时发现眼部疾病和视力变化。',
					similarList: ['轻度近视', '中度近视', '高度近视', '轴性近视', '屈光性近视', '单纯性近视', '病理性近视']
				}],
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.nowCase = this.allCase[0];
				// 当进入页面时 要先查询一下糖尿病的相似病例
				this.getSimilarCase(1, 5);
			})
		},
		methods: {
			selectDisease(index) {
				this.current = index;
				this.nowCase = this.allCase[index]
				this.getSimilarCase(index + 1, 5)
			},
			viewCaseDetailInfo(item) {
				this.showSimilarInfo = true;
				this.nowSimilarInfo = item;
			},
			getSimilarCase(diseaseType, k) {
				getTopKInfo(diseaseType, k).then((res) => {
					this.nowCase.similarCaseList = res.data;
					// 构造title
					for (let i = 0; i < this.nowCase.similarCaseList.length; i++) {
						let gender = this.nowCase.similarCaseList[i].gender === 'Male' ? '男性患者' : '女性患者';
						this.nowCase.similarCaseList[i].title = this.nowCase.similarCaseList[i].age + '岁' + gender;
					}
					if (res.data.length > 0) {
						this.hasSimilarCase = true;
					} else {
						this.hasSimilarCase = false;
					}
				})
			}
		},
	}
</script>

<style>
	@keyframes moveIn {
		0% {
			opacity: 0;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card-style {
		border-radius: 4px;
		border: 1px solid #ebeef5;
		background-color: #fff;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.disease-introduce {
		margin-top: 5px;
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.disease-info {
		margin-left: 5px;
	}

	.disease-example {
		width: 60px;
		height: 60px;
		border-radius: 4px;
	}

	.content-box {
		margin-top: 5px;
		padding: 10px;
	}

	.small-title {
		font-size: 22px;
		font-weight: 700;
	}

	.disease-content {
		font-size: 16px;
		line-height: 30px;
	}

	.case-detail {
		padding: 10px;
	}

	.info-form {
		margin-top: 10px;
	}

	.close-btn {
		width: 60%;
		margin: 0 auto;
	}
</style>